<template>
  <div class="container">
    <div class="head box box-ac">
      <img :src="require('../assets/images/icon-index-huankuan.png')"  alt="">
      <div class="text">借款类型（必选）</div>
    </div>
    <div class="type-list box box-ver">
      <div @click="checkType(index)" v-for="(item, index) in typeObj.list" :value="item" :key="index" class="item box">
        <div class="checkbox">
          <div :class="{'act': typeObj.actIndex===index}" class="icon icon-checkbox"></div>
        </div>
        <div class="right box-f1 box box-ver">
          <div class="name">{{item.name}}</div>
          <div class="tips box">
            <div>
              <div class="icon icon-invoice-tips"></div>
            </div>
            <div class="tc-888 txt" v-text="item.desc"></div>
          </div>
        </div>
      </div>
    </div>
    <div @click="next()" class="btn-bot">第二步 填写借款单</div>
  </div>
</template>

<script>

export default {
  name: 'jiekuanStep1',
  data () {
    return {
      typeObj: {
        actIndex: -1,
        list: [
          {
            type: 40,
            name: '一般借款',
            desc: '无事项申请类业务短期借款，还款期限为借款后30天内'
          },
          {
            type: 20,
            name: '事项借款',
            desc: '有事项申请类业务短期借款，还款期限为借款后30天内'
          },
          {
            type: 30,
            name: '备用金借款',
            desc: '有事项申请类业务长期借款，一般适用于长期备用金等业务，还款期限为本年12月10日前'
          }
        ]
      }
    }
  },
  mounted () {
    this.checkType(0)
  },
  methods: {
    checkType (index) {
      this.typeObj.actIndex = index
      let type = this.typeObj.list[this.typeObj.actIndex].type
      this.$store.commit('bizAccountBill', {
        loanType: this.typeObj.list[this.typeObj.actIndex]
      })
      if (index > 0) {
        this.$router.replace('/jiekuanSenQinList')
      }
    },
    next () {
      let type = this.typeObj.list[this.typeObj.actIndex].type
      if (type === 40) {
        this.$store.commit('bizAccountBill', {
          limitMoney: 10000000
        })
        this.$router.push('/jiekuanStep2')
      } else {

      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.btn-bot{
  @include btn(100%, 1rem, .36rem);
  position: absolute;
  bottom:0;
  left:0;
}
.head{
  font-size:.3rem;
  height:1.1rem;
  padding:0 .3rem;
  img{
    width:.6rem;
    margin-right:.2rem;
  }
}
.type-list{
  background-color:#FFF;
  .item{
    font-size:.36rem;
    border-bottom:1px solid $borderColor;
    height:2.2rem;
    .checkbox{
      margin-top:.1rem;
      margin-bottom:.1rem;
      padding-top:.2rem;
      width:.9rem;
      border-right:1px solid $borderColor;
      .icon-checkbox{
        margin-left:.24rem;
      }
    }
    .right{
      padding-top:.3rem;
      .name{
        padding-left:.3rem;
      }
      .tips{
        font-size:.24rem;
        padding-top:.2rem;
        .icon-invoice-tips{
          width:.3rem;
          height:.3rem;
          margin-right:.1rem;
        }
        .txt{
          line-height: .3rem;
        }
      }
    }
  }
}
</style>
